<template>
  <el-dialog
    :title="dialogData.type === 'add' ? '新增运营位' : '编辑运营位'"
    :close-on-click-modal="false"
    :visible.sync="dialogData.isShow"
    width="35%"
  >
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <el-form-item label="运营位名称:" prop="name">
          <el-input
            v-model.trim="formData.name"
            type="text"
            placeholder="输入运营位名称 1-15个字"
            maxlength="15"
            show-word-limit
            :readonly="isReadOnly"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input
            v-model.trim="formData.sort"
            type="number"
            placeholder="输入0-99之间的整数"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传图片" prop="img">
          <uploadSingImg
            :imgUrl="formData.img"
            accept=".jpg,.jpeg,.png,.gif"
            :maxSize="5"
            @getImgUrl="getConfigImg"
            :disabled="false"
          >
            <template v-slot:imgInfo
              >建议上传尺寸：750*200 格式为jpg png gif 大小不超过5M</template
            >
          </uploadSingImg>
        </el-form-item>
        <el-form-item v-if="false" label="添加链接:" prop="linkType">
          <el-radio v-model="formData.linkType" label="1">H5</el-radio>
          <el-radio v-model="formData.linkType" label="2">小程序</el-radio>
        </el-form-item>
        <el-form-item label="添加链接:" prop="linkUrl">
          <el-input
            v-model.trim="formData.linkUrl"
            type="text"
            placeholder="输入运营位的链接"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="dialogData.isShow = false"
        >取 消</el-button
      >
      <el-button type="success" @click="confirm('ruleForm')">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import {
  activityConfigDetail,
  addActivityConfig,
  editActivityConfig
} from '@/api/partner/activityConfig'
export default {
  props: ['dialogData'],
  data() {
    var validatePass = (rule, value, callback) => {
      setTimeout(() => {
        const conditions = () => {
          return value < 0 || value > 99 || value % 1 !== 0
        }
        if (value && conditions()) {
          callback(new Error('排序值应为0-99之间的整数'))
        } else {
          callback()
        }
      }, 500)
    }
    return {
      formData: {
        name: '',
        sort: '',
        img: '',
        linkType: 1,
        linkUrl: ''
      },
      isReadOnly: false,
      rules: {
        name: [
          { required: true, message: '运营位名称不能为空', trigger: 'blur' }
        ],
        sort: [{ validator: validatePass, trigger: 'blur' }],
        img: [
          { required: true, message: '至少上传一张图片', trigger: 'change' }
        ],
        linkType: [
          { required: true, message: '该选项不能为空', trigger: 'change' }
        ],
        linkUrl: [
          {
            required: true,
            pattern:
              '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]',
            message: '输入的链接格式不正确',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  components: {
    uploadSingImg
  },
  mounted() {
    if (this.dialogData.type === 'edit') {
      this.isReadOnly = true
      activityConfigDetail(this.dialogData, (res) => {
        // res.linkType = res.linkType.toString()
        this.formData = res
      })
    }
  },
  methods: {
    /* 上传图片 */
    getConfigImg(url) {
      this.formData.img = url
    },
    /* 确认提交 */
    confirm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const { type } = this.dialogData
          if (type === 'add') {
            addActivityConfig(this.formData, () => {
              _this.$emit('toSearch')
              this.dialogData.isShow = false
            })
          } else {
            const { img, linkType, linkUrl, name, sort, id } = this.formData
            editActivityConfig(
              {
                editInfo: { img, linkType, linkUrl, name, sort },
                id
              },
              () => {
                _this.$emit('toSearch')
                this.dialogData.isShow = false
              }
            )
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
